

<script>
import pagination from "element-ui/packages/pagination/src/pagination.js";
export default {
  extends: pagination,
}
/**
 * 参考链接：https://element.eleme.cn/#/zh-CN/component/pagination
 * 使用方法：
 * 父元素样式
 *    t
 *    position: relative;
 * <div style="padding-bottom: 76px;position: relative;">
    <Pagination2el
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
    />
 * <div>
 */
</script>

<style lang="scss" scoped>
.el-pagination {
  padding: 2px 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  :deep .el-pagination__sizes {
    position: absolute;
    left: 0;
  }
  :deep .btn-prev,
  :deep .btn-next,
  :deep .el-pager .more {
    background: none;
  }
  :deep .el-pager {
    .number {
      width: 24px;
      height: 24px;
      min-width: 24px;
      min-height: 24px;
      max-width: 24px;
      max-height: 24px;
      background: none;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #5d6c8e;
      padding: 0;
      margin: 0 4px;
      line-height: 24px;
    }
    .active {
      background: linear-gradient(0deg, #468df9 0%, #70b0fe 100%);
      box-shadow: 0px 4px 10px 0px rgba(0, 80, 195, 0.57);
      border-radius: 50%;
      color: #ffffff;
    }
  }
  :deep .el-pagination__jump {
    .el-pagination__editor {
      margin: 0 6px;
    }
  }
}

.el-pagination {
  padding: 24px 0;
  display: flex;
  justify-content: right;
  align-items: center;
  .el-pager {
    display: flex;
    align-items: center;
  }
}
</style>